<template>
  <t-space direction="vertical">
    <!-- 按钮操作区域 -->
    <t-radio-group v-model="size" variant="default-filled">
      <t-radio-button value="small">小尺寸</t-radio-button>
      <t-radio-button value="medium">中尺寸</t-radio-button>
      <t-radio-button value="large">大尺寸</t-radio-button>
    </t-radio-group>

    <t-space>
      <t-checkbox v-model="stripe"> 显示斑马纹 </t-checkbox>
      <t-checkbox v-model="bordered"> 显示表格边框 </t-checkbox>
      <t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox>
      <t-checkbox v-model="tableLayout"> 宽度自适应 </t-checkbox>
      <t-checkbox v-model="showHeader"> 显示表头 </t-checkbox>
    </t-space>

    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <t-table
      row-key="index"
      :data="data"
      :columns="columns"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :size="size"
      :pagination="pagination"
      :show-header="showHeader"
      cell-empty-content="-"
      resizable
      @row-click="handleRowClick"
      ><template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
      <template #image="{ row }">
    <div>
         <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                     <div class="tdesign-demo-image-viewer__ui-image">
                         <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                              <span>
                                  <BrowseIcon size="1.4em" /> 预览
                              </span>
                           </div>
                      </div>
                   </template>
              </t-image-viewer>
         </div>
    </div>
</template>
    </t-table>
  </t-space>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';

const statusNameListMap = {
    0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
    1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
    2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
};
const data = ref([

{
    "id": 1,
    "name": "谢逊",
    "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
    "gender": 1,
    "job": "班主任",
    "entrydate": "2023-06-09",
    "updatetime": "2023-07-01 00:00:00"
},
{
    "id": 2,
    "name": "韦一笑",
    "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
    "gender": 1,
    "job": "班主任",
    "entrydate": "2023-06-09",
    "updatetime": "2023-07-01 00:00:00"
},
{
    "id": 3,
    "name": "黛绮丝",
    "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
    "gender": 2,
    "job": "班主任",
    "entrydate": "2023-06-09",
    "updatetime": "2023-07-01 00:00:00"
},
{
    "id": 4,
    "name": "殷天正",
    "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
    "gender": 1,
    "job": "班主任",
    "entrydate": "2023-06-09",
    "updatetime": "2023-07-01 00:00:00"
}
]);

const total = ref(4);
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);

const columns = ref([
    { colKey: 'rowIndex', title: "序号" },
    { colKey: 'name', title: '姓名' },
    { colKey: 'image', title: '头像' },
    { colKey: 'gender', title: '性别' },
    { colKey: 'job', title: '职位' },
    { colKey: 'entrydate', title: '入职时间' },
    { colKey: 'updatetime', title: '更新时间' },
]);

const handleRowClick = (e) => {
    console.log(e);
};

const pagination = {
    defaultCurrent: 1,
    defaultPageSize: 5,
    total,
};
</script>